<template>
    <div class="my-container">
       <van-cell-group v-if="user" class="my-info">
         <van-cell 
         class="base-info" 
         center 
         :border="false"
         >
        <van-image
        class="avatar"
        slot="icon"
        round
        fit="cover"
        :src="currentUser.photo"
        />
         <div slot="title" class="name">{{currentUser.name}}</div>
         <van-button 
         size="small" 
         round 
         class="update-btn"
         to="user/profile"
         >编辑资料</van-button>
         </van-cell>
         <van-grid class="data-info" :border="false">
           <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                   <div class="count">{{currentUser.art_count}}</div>
                   <div class="text">头条</div>
               </div>
           </van-grid-item>
           <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                   <div class="count">{{currentUser.follow_count}}</div>
                   <div class="text">关注</div>
               </div>
           </van-grid-item>
           <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                   <div class="count">{{currentUser.fans_count}}</div>
                   <div class="text">粉丝</div>
               </div>
           </van-grid-item>
           <van-grid-item class="data-info-item">
               <div slot="text" class="text-wrap">
                   <div class="count">{{currentUser.like_count}}</div>
                   <div class="text">获赞</div>
               </div>
           </van-grid-item>
         </van-grid>
       </van-cell-group>
       <div v-else class="not-login">
           <div @click="$router.push({
               name:'login',
               query:{
                   redirect:'/my'
               }
           })">
               <img class="mobile" src="./手机.png" alt="">
           </div>
           <div class="text">登录/注册</div>
       </div>
       <van-grid class="nav-grid mb-4" :column-num="2">
           <van-grid-item class="nav-grid-item" icon-prefix="font_family icon" icon="shoucang" text="收藏" />
           <van-grid-item class="nav-grid-item" icon-prefix="font_family icon" icon="lishi" text="历史" />
         </van-grid>
         <van-cell title="消息通知" is-link to="" />
         <van-cell title="Sari同学" class="mb-4" is-link to="/user/chat" />
         <van-cell v-if="user" @click="onLogout" class="logout-cell" title="退出登录" />
    </div>
</template>
<script> 
import {mapState} from 'vuex'
import {getCurrentUser} from '@/api/user'
export default {
    name:'MyIndex',
    data(){
      return{
          currentUser:{}
      }
    },
    created(){
          this.loadCurrentUser()
    },
    computed:{
        ...mapState(['user'])
    },
    methods:{
        async loadCurrentUser(){
          const {data} =await getCurrentUser()
          this.currentUser=data.data
        },
        onLogout(){
            this.$dialog.confirm({
              title: '标题',
              message: '弹窗内容',
            })
            .then(() => {
            // on confirm
            this.$store.commit('setUser',null)
            })
            .catch(() => {
            // on cancel
            });
        }
    }
}
</script>
<style scoped lang="less">
.my-container{
    .my-info{
        background: url('./banner.png') no-repeat;
        background-size: cover;
        .base-info{
            box-sizing: border-box;
            height: 115px;
            padding-top: 38px;
            padding-bottom: 11px;
            background-color: unset;
            .avatar{
                box-sizing: border-box;
                border: 1px solid #fff;
                width: 66px;
                height: 66px;
                margin-right: 11px;
            }
            .name{
                font-size: 15px;
                color: #fff;
            }
            .update-btn{
                height: 16px;
                font-size: 10px;
                color: #666666;
            }
        }
        /deep/.van-grid-item__content{
            background-color: unset;
        }
    }
    .data-info{
       .data-info-item{
           height: 65px;
           color: #fff;
           .text-wrap{
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               .count{
               font-size: 18px;
           }
           .text{
               font-size: 11px;
           }
           }
       }
    }
     /deep/.nav-grid{
        .nav-grid-item{
            height: 70px;
           .font_family{
                font-size: 22px;
            }
            .icon-shoucang{
                color: #eb5253;
            }
            .icon-lishi{
                color: #ff9d1d;
            }
            .van-grid-item__content{
                font-size: 14px;
                color: #333333;
            }
        }
    }
    .logout-cell{
        text-align: center;
        color: #d86262;
    }
    .mb-4{
        margin-bottom: 4px;
    }
    .not-login{
        height: 180px;
        background: url('./banner.png') no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .mobile{
            width: 66px;
            height: 66px;
        }
        .text{
            color:#fff;
            font-size: 14px;
        }
    }
}
</style>